<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IM</title>
    <script src="jquery.js"></script>
    <style>

        body{
            background-color: #ccc;
        }

        .box1{
            width:400px;
            border:1px solid #ddd;
            padding:10px;
            height:600px;
            background-color: #fff;
            margin:auto;
            overflow: auto;
        }
        .phone{
            width:100%;
            overflow: hidden;
            word-break: break-all;
        }
        .info{
            padding:10px 0;
            overflow: hidden;
        }
        .name{
            clear: both;
            color:#ddd;
        }
        .text{
            clear:both;
            padding:5px;
            border-radius: 5px;
        }
        .left .name,.left .text{
            float:left;
        }
        .right .name,.right .text{
            float:right;
        }
        .left .text{
            background-color: #89cff0;
            color:#fff;
        }
        .right .text{
            background-color: #71A32A;
            color:#fff;
        }
        .sys{
            clear: both;
            text-align: center;
            padding:30px 0 15px;
        }
        .sys p{
            display: inline-block;
            padding:0;
            margin:0;
            font-size:14px;
            color:#fff;
            background-color: #ccc;
            padding:2px 10px;
            border-radius: 2px;
            text-align: center;
        }

        .box2{
            width:400px;
            margin:10px auto;
            background-color:#fff;
            padding:10px;
            border:1px solid #ddd;
        }
        input{
            font-size:14px;
            padding:5px;
            width:300px;
            outline: none;
            height:30px;
        }
        button{
            width:80px;
            font-size:14px;
            height:40px;
        }
        .inputbox{
            display: none;
        }

        .login{
            text-align: center;
            margin-top:250px;
        }

    </style>
</head>
<body>

<div class="login">
    <input id="name" type="text" placeholder="创建昵称，加入聊天室">
    <button id="enter">进入</button>
</div>

<div class="inputbox">
    <div class="box1">
        <div class="phone">

        </div>
    </div>
    <div class="box2">
        <input id="socket_text" type="text">
        <button id="socket_send">发送</button>
    </div>
</div>
<!--<div class="inputbox">-->
    <!--<div class="box1">-->
        <!--<div class="phone">-->
            <div class="info left">
                <div class="name">sidina</div>
                <div class="text">I love you,And you?</div>
            </div>
            <!--<div class="info right">-->
                <!--<div class="name">sidina</div>-->
                <!--<div class="text">I love you,And you?133333333333333333333333333333333333333333333</div>-->
            <!--</div>-->
            <!--<div class="sys">-->
                <!--<p>系统消息：xxx 不请自来咯。</p>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="box2">-->
        <!--<input id="socket_text" type="text">-->
        <!--<button id="socket_send">发送</button>-->
    <!--</div>-->
<!--</div>-->


<script>

    $(function(){

        //用户信息
        var $userInfo = {"username":"","content":"","issys":0};

        //创建用户名
        $('#enter').on('click',function(){
            if($('#name').val()=='') {
                alert('请设置昵称');
                return false;
            }
            $userInfo.username = $('#name').val();

            //昵称设置成功后显示聊天窗口（模拟登录）
            $('.login').hide();
            $('.inputbox').show();


            //登录成功后创建websocket连接

            //创建socket实例
            var socket = new WebSocket('ws://gateway.weierban.top:8282');

            //开启socket，并发送一条用户登录的广播信息
            socket.onopen = function(){
                $userInfo.issys = 1;
                $userInfo.content = "上线了";
                socket.send(JSON.stringify($userInfo));
            };

            //处理系统返回信息
            socket.onmessage = function(event){
                var $data = JSON.parse(event.data);

                //如果是系统消息
                if($data.issys){
                    $('.phone').append('<div class="sys"> <p>系统消息： '+$data.username+' '+$data.content+'。</p></div>');
                }else{
                    //普通消息
                    //如果是自己
                    if($userInfo.username == $data.username){
                        $('.phone').append('<div class="info right"><div class="name">'+$data.username+'</div><div class="text">'+$data.content+'</div></div>');
                    }else{
                        //不是自己
                        $('.phone').append('<div class="info left"><div class="name">'+$data.username+'</div><div class="text">'+$data.content+'</div></div>');
                    }
                }

            };

            //发送消息
            $('#socket_send').on('click',function(){
                $userInfo.issys = 0;
                $userInfo.content = $('#socket_text').val();
                socket.send(JSON.stringify($userInfo));
                $('#socket_text').val('');
            });


        });



    });


</script>


</body>
</html>